<template>
	<div id="allList">
		<div class="navBar">
			<uni-icons type="back" size="14" color="#fff" id="icon" @tap="goBack()"></uni-icons>
			<span class="title">查消息</span>
		</div>
		<div class="infoBox">
					<img src="../../static/image/hd.png" alt="">
					<div class="classBox">
					<div class="nameBox">陈晓涵</div>
					<div class="class">四年级二班</div>
		</div>
		</div>
		<div class="numBox">
					<ul>
						<li>
							<span class="numberBox">100</span>
							<br>
							<span>今日得分</span>
						</li>
						<li>
							<span class="numberBox">100</span>
							<br>
							<span>今日减分</span>
						</li>
						<li>
							<span class="numberBox">100</span>
							<br>
							<span>我的总分</span>
						</li>
					</ul>
		</div>
		<ul class="newsList">
			<li @tap="goDetail">
				<img src="../../static/image/hd.png" alt="">
				<div class="textInfo">
					<view style="height: 53rpx;width: 100%;display: flex;">
						<view style="margin-right: 4rpx;"><uni-icons type="arrow-up" size="24" color="#42B983"></uni-icons></view>
						<view style="color: #67C23A;">18分</view>
					</view>
					<view class="text">
						热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信...
					</view>
					<view class="bottomDetails">
						<view class="date">
							<span style="width: 40rpx;height: 40rpx;line-height:40rpx;margin-left: 10rpx;"><img src="../../static/image/date.png" alt="" style="width: 80%;height: 80%;"></span>
							<view>2023.5.20</view>
						</view>
						<view style="24rpx;margin-right: 10rpx;">
							查看详情
						</view>
					</view>
				</div>
			</li>
			<li>
				<img src="../../static/image/hd.png" alt="">
				<div class="textInfo">
					<view style="height: 53rpx;width: 100%;display: flex;">
						<view style="margin-right: 4rpx;"><view style="margin-right: 4rpx;"><uni-icons type="arrow-down" size="24" color="red"></uni-icons></view></view>
						<view style="color: #67C23A;">18分</view>
					</view>
					<view class="text">
						热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信...
					</view>
					<view class="bottomDetails">
						<view class="date">
							<span style="width: 40rpx;height: 40rpx;line-height:40rpx;margin-left: 10rpx;"><img src="../../static/image/date.png" alt="" style="width: 80%;height: 80%;"></span>
							<view>2023.5.20</view>
						</view>
						<view style="24rpx;margin-right: 10rpx;">
							查看详情
						</view>
					</view>
				</div>
			</li>
			<li>
				<img src="../../static/image/hd.png" alt="">
				<div class="textInfo">
					<view style="height: 53rpx;width: 100%;display: flex;">
						<view style="margin-right: 4rpx;">icon</view>
						<view style="color: #67C23A;">18分</view>
					</view>
					<view class="text">
						热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信...
					</view>
					<view class="bottomDetails">
						<view class="date">
							<span style="width: 40rpx;height: 40rpx;line-height:40rpx;margin-left: 10rpx;"><img src="../../static/image/date.png" alt="" style="width: 80%;height: 80%;"></span>
							<view>2023.5.20</view>
						</view>
						<view style="24rpx;margin-right: 10rpx;">
							查看详情
						</view>
					</view>
				</div>
			</li>
			<li>
				<img src="../../static/image/hd.png" alt="">
				<div class="textInfo">
					<view style="height: 53rpx;width: 100%;display: flex;">
						<view style="margin-right: 4rpx;">icon</view>
						<view style="color: #67C23A;">18分</view>
					</view>
					<view class="text">
						热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信...
					</view>
					<view class="bottomDetails">
						<view class="date">
							<span style="width: 40rpx;height: 40rpx;line-height:40rpx;margin-left: 10rpx;"><img src="../../static/image/date.png" alt="" style="width: 80%;height: 80%;"></span>
							<view>2023.5.20</view>
						</view>
						<view style="24rpx;margin-right: 10rpx;">
							查看详情
						</view>
					</view>
				</div>
			</li>
			<li>
				<img src="../../static/image/hd.png" alt="">
				<div class="textInfo">
					<view style="height: 53rpx;width: 100%;display: flex;">
						<view style="margin-right: 4rpx;">icon</view>
						<view style="color: #67C23A;">18分</view>
					</view>
					<view class="text">
						热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信热爱祖国，尊敬老师，团结同学，礼貌问好，乐于助人，诚实守信...
					</view>
					<view class="bottomDetails">
						<view class="date">
							<span style="width: 40rpx;height: 40rpx;line-height:40rpx;margin-left: 10rpx;"><img src="../../static/image/date.png" alt="" style="width: 80%;height: 80%;"></span>
							<view>2023.5.20</view>
						</view>
						<view style="24rpx;margin-right: 10rpx;">
							查看详情
						</view>
					</view>
				</div>
			</li>	
		</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				chooseValue: "",
				list: [{
					id: 1,
					content: '张三'
				}, {
					id: 2,
					content: '李四'
				}, {
					id: 3,
					content: '王五'
				}],
			};
		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:"/pages/detail/index"
				});
			},
			goBack(){
				uni.navigateBack({
				    delta: 1
				})
			},
		},
	}
</script>

<style>
	#allList{
		height: 1576rpx;
		background: url("../../static/image/txbj.png") no-repeat;
		background-size: 140%;
	
	}
	.navBar {
		height: 72rpx;
		background: #ffffff00;
		padding-top: 84rpx;
		position: relative;
	}
	
	.navBar>span {
		margin: auto;
	}

	#icon {
		margin-left: 69rpx;
		font-size: 18px;
	}
	
	.title {
		color: #FFF;
		position: absolute;
		left: 50%;
		transform: translate(-50%)
	}
	.numBox{
		height: 94rpx;
		width: 100%;
		display: flex;
		padding-bottom: 20rpx;
	}
	.numBox>ul{
		height: 100rpx;
	}
	.infoBox{
		height: auto;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 100%;
		padding-left:48rpx ;
		display: flex;
	}
	.infoBox>img{
		width: 128rpx;
		height: 128rpx;
		border: 4px solid #B8E8D6;
		border-radius: 50%;
		margin-right: 13rpx;
	}
	.nameBox{
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		font-size: 40rpx;
		text-align: center;
		color: #fff;
	}
	.classBox{
	height: 100rpx;
	font-size: 24rpx;
	text-align: center;
	color: #fff;
	}
	.numBox{
		width: 100%;
	}
	.numBox>ul{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
	.numBox>ul>li{
		width: 243rpx;
		height: 80rpx;
		border-right: 1px solid #74D2AE;
		text-align: center;
		color: #FFF;
	}
	.numBox>ul>li:nth-child(3){
		border: none;
	}
	.numberBox{
		font-weight: 700;
	}
	.newsList{
		border-radius: 30rpx;
		margin: auto;
		width: 606rpx;
		padding: 20px;
		background: #FFF;
	}
	.newsList>li{
		height: 164rpx;
		width: 100%;
		display: flex;
		margin-bottom: 20rpx;
	}
	.newsList>li>img{
		width: 164rpx;
		height: 164rpx;
		float: left;
		margin-right: 20rpx;
	}
	.textInfo{
		width: 442rpx;

	}
	.text{
		height: 66rpx;
		font-size: 24rpx;
		   text-overflow: ellipsis;
		    -webkit-line-clamp: 2;
		    display: -webkit-box;
		    -webkit-box-orient: vertical;
			overflow: hidden;
	}
	.bottomDetails{
		height: 40rpx;
		width: 100%;
		display: flex;
		font-size: 24rpx;
		justify-content: space-between;
	}
	.date{
		display: flex;
		color: #CACACA;
	}
</style>